<template>
	<view class="home">
		    	<swiper  circular indicator-dots  autoplay>
					<swiper-item  v-for=" item in  swipers"    :key="item.id"  >
						 <image :src="item.img" ></image>
					</swiper-item>
				</swiper>
			   <!-- 2、导航区域-->
			<view class="nav">
				 <view class="nav-item"   v-for=" (item,index)  in  navs" :key="index"  @click="navItemEvt(item.path)" >
				 	  <view :class="  item.icon  "> </view>
					  <text> {{item.title}}</text>
				 </view>
				 
			</view>
			
			<!-- 3、推存商品区 -->
			<view class="hot_goods">
				<view class="title">
				      推存商品	
				</view>
				
				<goodslist  :GOODS="goods"    @goodsItemEvt= "goodsItemDetailEvt"></goodslist>
			</view>
	</view>
</template>

<script>
	
	import { getlunboApi } from "../../util/homeApi.js"
	
	import   goodsList from "../../components/goods-list/goods-list.vue"
	export default {
		data() {
			return {
			    swipers:[],
			  
		 		Number:1,
				goods:[],
				navs:[
					{
					   icon:'iconfont  icon-ziyuan ',
					   title:'黑马超市',
					   path:'/pages/goods/goods'
				  },
				  {
					   icon:'iconfont  icon-guanyuwomen ',
					   title:'联系我们',
					   path:'/pages/contact/contact'
				  },
				  {
					   icon:'iconfont  icon-tupian ',
					   title:'社区图片',
					   path:'/pages/pics/pics'
				  },
				  {
					   icon:'iconfont  icon-shipin ',
					   title:'学习视频',
					   path:'/pages/videos/videos'
				  },
				
				]
			}
		},
		
		components:{goodslist:goodsList},
		onLoad() {
             this.getSwipers()
			 this.getHotGoods(this.Number)
		},
		methods: {
			
			/* 下面两种方式都可以哈 */
          /* async  getSwipers(){
				 let  result =   await     getlunboApi()
				
				 console.log(result)
				 
				 } */
				 
				 /* 1、获取轮播数据*/
			 async getSwipers(){
				
			    	const   res   =  await  this.$myRequest({
							url:'/api/getlunbo'
						})	
					this.swipers  =  res.data.message 
						
					}  ,
					/* 2、获取热门商品数据 */
			 async   getHotGoods(number){
				       
				      const  res = await this.$myRequest({   
						     url:  `/api/getgoods?pageindex=${number}`
						 /* url: '/api/getgoods?pageindex=' + number */
					  })
					 
					  this.goods = res.data.message
					
				},
				
				navItemEvt(url){
					uni.navigateTo({
						url,
					})
				},
				
				
				goodsItemDetailEvt(id){
					
					uni.navigateTo({
						url:"/pages/goods-detail/goods-detail?id=" + id
					})
				}
				
				
			}	 
		  
		}

	
</script>

<style  lang="scss"  scoped>
	.home{
		swiper{
			width: 750rpx;
			height: 380rpx;
			
			image{
				height: 100%;
				width: 100%;
			}
			
		}
		
	 .nav{
		 display: flex;
		 .nav-item{
			 width: 25%;
			 text-align: center;
			 >view{
				 width: 120rpx;
				 height:120rpx;
				 background-color:#b11c00;
				 border-radius: 60rpx;
				 margin: 10px  auto;
				 line-height: 120rpx;
				 color: #fff;
				 font-size: 50rpx;
				 
				 
			 }
			 >text{
				 font-size: 30rpx;
			 }
		 }
	 }	
	
	  .hot_goods{
		  background-color: #eee;
		  overflow: hidden;
		  margin-top: 10px;
		  >.title{
			  
			  height: 50px;
			  line-height: 50px;
			  color: $shop-color;
			  background-color: #fff;
			  margin: 10rpx  0;
			  text-align: center;
			  /* 字间距*/
			  letter-spacing: 20px;
		  }
		  
		
	  }
	    
	}
	
	
</style>
